<template>
    <div class='device-control'>
        <el-card body-style="padding: 15px;">
            <div class="title">
                <img :src="imageAarray[type].imageUrl" style="width: 60px; height: 60px;">
                <el-tooltip :content="value">
                    <el-switch v-model="value" active-color="#7728F5" inactive-color="#9A9A9A" active-value="打开"
                        inactive-value="关闭" @change="ControlDeviceStatus">
                    </el-switch>
                </el-tooltip>
            </div>
            <div class="main">
                <p>{{ name }}</p>
            </div>
            <!-- 加入具体设备细节——待完成 -->
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'DeviceControl',
    components: {},
    props: {
        type: {
            type: Number,
            required: true
        },
        name: {
            type: String,
            required: true
        },
        url: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            value: '关闭',
            imageAarray: [
                {
                    imageUrl: require('../assets/tv.svg'),
                },
                {
                    imageUrl: require('../assets/light.svg'),
                },
                {
                    imageUrl: require('../assets/aircondition.svg'),
                }
            ],
        };
    },
    methods: {
        ControlDeviceStatus(value) {
            console.log(value);
            if (this.value == '打开') {
                this.$http.put(`${this.url}/open?deviceName=${this.name}`)
                    .then(response => {
                        const responseData = response.data;
                        console.log(responseData);
                        if (responseData.errcode === 0) {
                            this.$message({
                                message: this.name + '设备打开成功',
                                type: 'success'
                            });
                        }
                    })
                    .catch(error => {
                        error;
                    });
            } else {
                this.$http.put(`${this.url}/close?deviceName=${this.name}`)
                    .then(response => {
                        const responseData = response.data;
                        console.log(responseData);
                        if (responseData.errcode === 0) {
                            this.$message({
                                message: this.name + '设备关闭成功',
                                type: 'success'
                            });
                        }
                    })
                    .catch(error => {
                        error;
                    });
            }
        }
    },
    mounted() {

    },
}
</script>

<style scoped>
.device-control {
    height: 100%;
}

.el-card {
    box-shadow: 0 0 10px rgba(155, 153, 153, 0.5);
}

.title {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
}

.main {
    display: flex;
    align-items: center;
    margin-left: 5px;

}

.main p {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    margin-top: 10px;
}
</style>